
<template>
    <div class="body_list_wp">
        <div class="body_list_title_name">
            <i class="iconfonMy icon-lianjie" title="联动窗口" v-show="IsLianDong" @click="IsLianDong = !IsLianDong"></i>
            <i class="iconfonMy icon-duankailianjie" title="非联动窗口" v-show="!IsLianDong"
                @click="IsLianDong = !IsLianDong"></i>
            <span>{{ storeMain.selectHeyue?.heyue_name }}</span>
            <span class="select_win" v-show="storeChart.selectbodyChartListTab == '分时图'">日窗<i
                    class="iconfonMy icon-xiajiantou"></i></span>
        </div>
        <div class="body_list_content">
            <div class="left">
                <div v-for="(item, index) in bodyList" :key="index" :style="{ 'z-index': bodyList.length - index }"
                    @click="selectBodyListTap(item)">
                    <span class="name" :class="{ active: storeChart.selectbodyChartListTab == item }"><span>{{ item
                    }}</span></span>
                </div>
            </div>
            <div class="center" v-if="IsLeftHangQing">
                <bodyListLeft />
            </div>
            <div class="right">
                <div class="right_chart" id="right_chart">
                    <chartKline :minLineVal="minLineVal" />
                </div>
                <div class="right_move">
                    <div class="right_move" ref="rightMove"></div>
                </div>
                <div class="right_mingxi" :style="{ width: isShowMingxi ? 'auto' : '10px' }">
                    <div class="right_mingxi_body" v-show="isShowMingxi">
                        <chartMingxi />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const { ipcRenderer } = require('electron');
import { mainStore, chartStore } from '@/store/index.js'
import bus from '@/utils/bus.js'

import chartKline from '../chart/chart_kline.vue'
import bodyListLeft from './body_list_left.vue'
import chartMingxi from '../chart/chart_mingxi.vue'

const storeMain = mainStore()
const storeChart = chartStore()




const oldSubscribe = ref([])
const fenshiSubscribe = ref(null)
// const bodyList = ref(['分时图', 'K线图', '资讯链', 'F10资料'])
const bodyList = ref(['分时图', 'K线图'])
const dragLocation = ref(null);
const rightMove = ref(null)
const isShowMingxi = ref(true)
const minLineVal = ref(0)
const IsLianDong = ref(true)
const IsLeftHangQing = ref(localStorage.getItem('IsLeftHangQing') == 1)

onUnmounted(() => {
    bus.off('changeHeadApiVal')
    bus.off('turnOver')
    if (oldSubscribe.value.length > 0) {
        storeChart.hangqingMqtt.unsubscribe(oldSubscribe.value[0])
        storeChart.hangqingMqtt.unsubscribe(oldSubscribe.value[1])
    }
    if (fenshiSubscribe.value) {
        storeChart.hangqingMqtt.unsubscribe(fenshiSubscribe.value)
    }
    document.removeEventListener("mousedown", mousedown);
    document.removeEventListener("mousemove", mouseMove);
    document.removeEventListener("mouseup", mouseUp);
});
bus.on('changeHeadApiVal', (e) => {
    setGetKlineData(e.type)
})
bus.on('turnOver', () => {
    storeChart.setSelectBodyListHeyueTable(storeChart.hqData)
    storeChart.setFenshiDataVal([])
    init();
})

let resTime = null
ipcRenderer.on('window-resize', (e, v) => {
    clearTimeout(resTime)
    resTime = setTimeout(() => {
        let rightChart = document.getElementById('right_chart')
        if (rightChart) rightChart.style.width = v.width - 270 + 'px';
    }, 200);
})

ipcRenderer.on('right_click_msg_win', (e, v) => {
    if (v.type == '显示右侧盘口信息') {
        isShowMingxi.value = v.msg == 1 ? true : false
        localStorage.setItem('isShowMingxi', v.msg)
        if (isShowMingxi.value) {
            let rightChart = document.getElementById('right_chart')
            rightChart.style.width = rightChart.offsetWidth - 240 + 'px';
        }
    }
    if (v.type == '显示/隐藏左侧行情') {
        IsLeftHangQing.value = !IsLeftHangQing.value
        localStorage.setItem('IsLeftHangQing', IsLeftHangQing.value ? 1 : 2)
        if (IsLeftHangQing.value) {
            let rightChart = document.getElementById('right_chart')
            rightChart.style.width = rightChart.offsetWidth - 292 + 'px';
        }
    }
})

onMounted(() => {
    isShowMingxi.value = localStorage.getItem('isShowMingxi') == null ? true : localStorage.getItem('isShowMingxi') == 1 ? true : false
    init();
})
const init = async () => {
    if (fenshiSubscribe.value) {
        storeChart.hangqingMqtt.unsubscribe(fenshiSubscribe.value)
    }
    fenshiSubscribe.value = `fenshi/${storeChart.hangqingMqtt.clientId}/${storeMain.selectHeyue.heyue_bh}`
    storeChart.hangqingMqtt.subscribe(fenshiSubscribe.value)
    storeChart.hangqingMqtt.publish(`40;${storeMain.selectHeyue.heyue_bh};9;${storeChart.hangqingMqtt.clientId};`);
    await storeChart.getTradetimeList('tradetime', { contract_id: storeMain.selectHeyue.heyue_id });
    await setGetKlineData(storeChart.KlineAPiVal)
    tuozhuai()
}

const getKlineData = async (val, time) => {
    if (oldSubscribe.value.length > 0) {
        storeChart.hangqingMqtt.unsubscribe(oldSubscribe.value[0])
        storeChart.hangqingMqtt.unsubscribe(oldSubscribe.value[1])
    }
    if (fenshiSubscribe.value) {
        storeChart.hangqingMqtt.unsubscribe(fenshiSubscribe.value)
    }
    fenshiSubscribe.value = `fenshi/${storeChart.hangqingMqtt.clientId}/${storeMain.selectHeyue.heyue_bh}`
    storeChart.hangqingMqtt.subscribe(fenshiSubscribe.value)
    storeChart.hangqingMqtt.publish(`40;${storeMain.selectHeyue.heyue_bh};9;${storeChart.hangqingMqtt.clientId};`);
    minLineVal.value = val
    storeChart.hangqingMqtt.publish(`40;${storeMain.selectHeyue.heyue_bh};${val};${storeChart.hangqingMqtt.clientId};`)
    oldSubscribe.value[0] = `kxian/${storeChart.hangqingMqtt.clientId}/+/+`
    oldSubscribe.value[1] = `kxian/current/${storeMain.selectHeyue.heyue_bh}/${time}`
    storeChart.hangqingMqtt.subscribe(oldSubscribe.value[0]);
    storeChart.hangqingMqtt.subscribe(oldSubscribe.value[1])
}

const setGetKlineData = (nevVal) => {
    if (!nevVal) return;
    let time = '1min'
    let minLineVal = 0
    switch (nevVal) {
        case '分时':
            time = '1min'
            minLineVal = 0
            storeChart.changeklineCycle(4)
            break;
        case 'K线':
            time = '1min'
            minLineVal = 0
            storeChart.changeklineCycle(4)
            break;
        case '1分钟':
            time = '1min'
            minLineVal = 0
            storeChart.changeklineCycle(4)
            break;
        case '3分钟':
            time = '3min'
            minLineVal = 1
            storeChart.changeklineCycle(20003)
            break;
        case '5分钟':
            time = '5min'
            minLineVal = 2
            storeChart.changeklineCycle(5)
            break;
        case '15分钟':
            time = '15min'
            minLineVal = 3
            storeChart.changeklineCycle(6)
            break;
        case '30分钟':
            time = '30分钟'
            minLineVal = 4
            storeChart.changeklineCycle(7)
            break;
        case '一小时':
            time = '1hour'
            minLineVal = 5
            storeChart.changeklineCycle(8)
            break;
        case '二小时':
            time = '2hour'
            minLineVal = 6
            storeChart.changeklineCycle(11)
            break;
        case '四小时':
            time = '4hour'
            minLineVal = 7
            storeChart.changeklineCycle(12)
            break;
        case '日线':
            time = '1day'
            minLineVal = 8
            storeChart.changeklineCycle(0)
            break;
        default:
            return;
    }
    getKlineData(minLineVal, time)
}

const selectBodyListTap = (item) => {
    if (storeChart.selectbodyChartListTab == item) return;
    storeChart.changeSelectbodyChartListTab(item)
    if (item == '分时图' || item == 'K线图') {
        let changeKlineAPiVal = item == '分时图' ? '分时' : 'K线'
        storeChart.changeHeadApiVal({ type: changeKlineAPiVal })
    }
}
const tuozhuai = () => {
    document.addEventListener("mousedown", mousedown);
    document.addEventListener("mousemove", mouseMove);
    document.addEventListener("mouseup", mouseUp);
}
const mousedown = (event) => {
    const targetDom = event.target;
    if (targetDom.className === "right_move") {
        dragLocation.value = event.x;
        event.preventDefault();
        event.stopPropagation();
    } else {
        dragLocation.value = null;
    }
}
const mouseMove = (event) => {
    if (dragLocation.value || dragLocation.value === 0) {
        rightMove.value.style.transform = ` translateX(${event.x - dragLocation.value}px)`;
        event.preventDefault();
        event.stopPropagation();
    }
}
const mouseUp = (event) => {
    if (dragLocation.value || dragLocation.value === 0) {
        if (isShowMingxi.value) {
            if (event.x - dragLocation.value > 0) {
                isShowMingxi.value = false
            } else {
                isShowMingxi.value = true
            }
        } else {
            if (event.x - dragLocation.value < 0) {
                let rightChart = document.getElementById('right_chart')
                rightChart.style.width = rightChart.offsetWidth - 240 + 'px';
                isShowMingxi.value = true
            } else {
                isShowMingxi.value = false
            }
        }
        rightMove.value.style.transform = ` translateX(0)`;
    }
    dragLocation.value = null;
    event.preventDefault();
    event.stopPropagation();

}
</script>

<style lang="scss" scoped>
.body_list_wp {
    height: 100%;
    position: relative;

    .body_list_title_name {
        border-bottom: 1px #890e07 solid;
        line-height: 21px;
        height: 21px;
        margin: 0 28px;
        padding: 0 5px;

        i {
            font-size: 13px;
            padding-right: 5px;
        }

        .select_win {
            margin-left: 20px;

            i {
                margin-left: 3px;
            }
        }
    }

    .body_list_content {
        display: flex;
        height: calc(100% - 21px);

        .left {
            border-bottom-right-radius: 30px;
            border: 2px rgba(255, 255, 255, 0.3) solid;
            border-left: none;
            border-top: none;
            height: 90%;
            width: 32px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            position: relative;
            margin-top: 2px;

            div {
                width: 100%;
                border-radius: 4px;
                border-bottom-left-radius: 0;
                width: 23px;
                height: 67px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 7px;


                .name {
                    height: 80px;
                    background-color: rgba(255, 255, 255, -0.8);
                    clip-path: polygon(0% 78%, 100% 100%, 100% 0%, 0% 0%);
                    box-shadow: 0 0 0 2px #4d4d4d;
                    border: 13px #4d4d4d solid;
                    position: relative;
                    margin-left: 14px;
                    margin-top: 6px;

                    span {
                        position: absolute;
                        writing-mode: vertical-rl;
                        text-orientation: mixed;
                        top: -1px;
                        left: -7px;
                        z-index: 10;
                    }
                }

                .name::after {
                    content: "";
                    position: absolute;
                    left: -11px;
                    top: -11px;
                    height: 53px;
                    background-color: #000;
                    clip-path: polygon(0% 78%, 100% 100%, 100% 0%, 0% 0%);
                    box-shadow: 0 0 0 2px #000;
                    border: 11px #000 solid;
                }

                .active {
                    margin-left: 15px;
                }

                .active::after {
                    content: "";
                    position: absolute;
                    left: -11px;
                    top: -11px;
                    height: 59px;
                    width: 10px;
                    background-color: #000;
                    clip-path: polygon(0% 75%, 100% 100%, 100% 0%, 0% 0%);
                    box-shadow: 0 0 0 2px #000;
                    border: 10px #000 solid;
                }
            }
        }

        .center {
            margin-left: 5px;
            width: 287px;
        }

        .right {
            flex: 1;
            position: relative;
            display: flex;

            .right_chart {
                flex: 1;
                height: 100%;
            }

            .right_move {
                background-color: #890e07;
                width: 2px;
                height: 100%;
                height: calc(100% + 9px);
                margin-top: -9px;
                cursor: w-resize;
                z-index: 100;

                &:hover {
                    background-color: #890e07;
                }
            }

            .right_mingxi {
                background-color: #000;

                height: calc(100% + 19px);
                margin-top: -19px;
                margin-right: 3px;

                .right_mingxi_body {
                    width: 240px;
                    height: 100%;
                }
            }
        }
    }



}
</style>
